<template>
  <div class="content">
    <div class="header">
      <h3 class="title">{{ song.music_name }}</h3>
    </div>
    <p>正在听歌用户列表</p>
    <div v-for="item in song.user_list" :key="item.user_id">
      <van-cell :title="item.nick_name">
        <template #icon>
          <div class="headImg">
            <van-image round :src="item.avatar" width="40" height="40"/>
          </div>
        </template>
        <template #right-icon>
          <div>
            <van-button square size="small" type="primary" @click="sendMail(item.user_id,item.nick_name)" text="发邮件"/>
          </div>
        </template>
      </van-cell>
    </div>
  </div>
</template>

<script>
export default {
  name: "Songpage",
  data() {
    return {
      song: {}
    };
  },
  methods: {
    sendMail(user_id,nick_name){
      MiniApp.setStorage({
        key:"mail",
        data:{
          from_user:{
            user_id,
            nick_name
          }
        },
        success(){
          MiniApp.navigateTo({url:"/mailreply.html"})
        }
      })
    }
  },
  mounted() {
    let that = this
    MiniApp.getStorage({
      key: "songInfo",
      success(res) {
        let data = res.data
        if (data) {
          let song = JSON.parse(data)
          that.song = song
        }
      }
    })
  }
}
</script>

<style scoped>
.header {
  padding: 20px;
  height: 300px;
}

.title {
  font-size: 50px;
  margin-bottom: 30px;
}

.headImg {
  margin-right: 20px;
}

.content {
  background: rgba(255, 255, 255, 0.6);
  height: 100%;
}
</style>